<template>
  <div class="box">
      <div class="title">收藏题目</div>
      <!-- <div class="search">
          <div class="search-input">
              <el-input
              placeholder="输入用户信息"
              v-model="input"
              clearable
              @keydown.enter="searchArt"
              />
          </div>
          <div class="search-search">
              <el-button type="primary" @click="searchArt">搜索</el-button>
          </div>
      </div> -->
      <div class="body">
            <el-table  :data="allTopicList" :row-selection="true" @selection-change="allCheckd" scrollbar-always-on="true" border style="width: 100%" max-height="600px" type="index" :row-style="{height:'58px'}">
                <el-table-column   width="55" label="全选"  fixed="left" type="selection">
                </el-table-column>
                <el-table-column prop='choosetopic[0].topicLibraryId' label="题库号" width="140" fixed="left" align="center"/>
                <el-table-column prop="choosetopic[0].chooseTitle" label="题目标题"  width="520" :show-overflow-tooltip="true"/>
                <el-table-column label="操作" fixed="right" width="400" align="center">
                    <template #default="scope">
                        <button class="delBtn" @click="delTopic(scope.$index)">删除</button>
                        <button class="editBtn" @click="dialogUpdate(scope.$index)">修改</button>
                    </template>
                </el-table-column>           
            </el-table>
      </div>
      <div class="pagination">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="allPages"
              @current-change="getPageNum"
              @prev-click="getPageNum"
              @next-click="getPageNum"
          />
      </div>
  </div>
</template>

<script>

import { selectPage,selectPageTotals} from '@/api/secondary_api/PageTopicCollect'

export default {
data(){
  return{
    noteList:[],//一页用户
    pageNum:1,//当前页
    pageSize:10,//每页显示的条数
    allPages:0,//一共多少页
    allTopicList:[]
  }
},
methods:{
  // getAllTopic(){
  //   getAllTopics().then(
  //     response=>{
  //       this.noteList = response.data
  //       if(response.data.length%10 == 0){
  //         this.allPages  = response.data.length/10
  //       }else{
  //         this.allPages = parseInt(response.data.length/10)+1
  //       }
  //   })
  // },
},
mounted(){
  // this.getAllTopic()
  selectPage(this.pageNum,this.pageSize).then(
    response=>{
      this.allTopicList = response.data;
      console.log(response);
    }
  );
  selectPageTotals().then(
    response=>{
      this.allPages = response.data;
    }
  )
},
}
</script>

<style scoped>
.box{
        width: 100%;
        /* height: calc(100vh - 151px); */
        font-style: 40px;
        overflow: hidden;
    }
    .title{
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: bold;
        text-indent: 2em;
        border-bottom: 1px solid #Ccc;
    }
    .top{
        width: 100%;
        /* height: 35px;
        line-height: 35px; */
        padding: 0 2%;
        overflow: hidden;
        margin-top: 10px;
    }
    .top-content{
        width: 96%;
        height: 35px;
        margin-top: 10px;
        overflow: hidden;
    }
     .top-content>div{
        float: right;
     }
     .top-content>div>button{
         width: 130px;
         height: 35px;
         line-height: 35px;
         color: #fff;
         margin-left: 10px;
         border-radius: 5px;
        border: 1px solid #fff;
     }
     button:hover{
         opacity: 0.5;
     }
      .top-content>div>button:nth-of-type(1){
          background-color: #00ffff;
     }
     .top-content>div>button:nth-of-type(2){
           background-color: red;
     }
     .search{
         width: 100%;
         padding: 0 2%;
         overflow: hidden;
     }
     .search-content{
         width: 96%;
         overflow: hidden;
         margin-top: 10px;
          border: 1px solid #ccc;
     }
     .search-left{
         width: 90%;
         float: left;
     }
    .search-right{
         width: 10%;
         float: left;
     }
     .search-left>.el-input{
         width: 20%;
     }
     .search-right>button{
         width: 100%;
         height: 32px;
         overflow: hidden;
         background-color: #00ffff;
         float: right;
        border: 1px solid #fff;
        border-radius: 5px;
     }
    .content{
        height: 500px;
        margin-top: 5px;
        padding: 0 2%;
        position: relative;
    }
   
    .topic-top{
        width: 100%;
        overflow: hidden;
    }
     .topic-library-id{
        width: 10%;
    }
    .topic-item{
        width: 100%;
        overflow: hidden;
    }
    .topic-top>ul>li{
        list-style: none;
        width: 16.5%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: aliceblue;
        font-size: 15px;
        float: left;
        color: #000;    
        border: 1px solid #ccc; 
    }
     .topic-top>ul>li:nth-of-type(1){
         text-align: center;
         width: 10%;
     }
      .topic-item>ul>li:nth-of-type(1){
          text-align: center;
         width: 10%;
      }
     .topic-top>ul>li:nth-of-type(2){
        text-align: center;
         width: 10%;
     }
    .topic-item>ul>li:nth-of-type(2){
           text-align: center;
         width: 10%;
      }
    .topic-top>ul>li:nth-of-type(3){    
         width: 28%;
     }
    .topic-item>ul>li:nth-of-type(3){
        font-size: 14px;
         width: 28%;
      }
      .topic-top>ul>li:nth-of-type(4){  
           
         text-align: center;
     }
    .topic-item>ul>li:nth-of-type(4){
          font-size: 15px; 
          text-align: center;
          font-family: "微软雅黑", "隶书",serif;
      }
     .topic-top>ul>li:nth-of-type(5){
          width: 18%;
          font-size: 14px;
      }
    .topic-item>ul>li:nth-of-type(5){
          width: 18%;
          font-size: 14px;
      }
    .topic-top>ul>li:nth-of-type(6){
         text-align: center;
      }
    .topic-item>ul>li:nth-of-type(6){
            text-align: center;
      }
    .topic-item>ul{
           overflow: hidden;
           height: 100%;
       }
    .topic-item>ul>li{
        list-style: none;
        width: 16.5%;
        height: 61px;
        line-height: 61px;
        font-size: 15px;
        float: left;
        text-overflow:  ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #333;
        border: 1px solid #ccc; 
    }
     .topic-item:nth-of-type(odd)>ul>li{
         background-color: #eee;
     }
    .delBtn{
        background-color: red;
        color: #fff;
    }
     .editBtn{
        background-color: #0079f3;
        color: #fff;
    }
    .delBtn,.editBtn{
        width: 65px;
        height: 30px;
        line-height: 30px;
        border: 0px;
        border-radius: 5px;
        margin-left: 10px;
        border: 1px solid #fff;
    }
    .dialog-footer{
        margin-left:42%;
    }
    .addButton{
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        background-color: #fff;
        position: absolute;
        right: 0;
    }
    .delButton{
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        background-color: #fff;
        position: absolute;
        right: 30px;
    }
    .el-input{
        width: 50%; 
    }
    .el-input__count{
        height: 10%;
    }
    .bottom{
        position: absolute;
        left: 45%;
        bottom: 40px;
    }
</style>